<template>
    <div class="join">
      <img src="https://wxoss.xiaoniaoai.com/growth_archives/img/bg-join.png" alt="">
      <div class="container">
        <h3>欢迎加入我们</h3>
        <form action="">
          <div class="form-group">
            <label for="stuName">姓名</label><br>
            <input type="text" id="stuName" name="stuName">
          </div>
          <div class="form-group">
            <label for="stuAge">年龄</label><br>
            <input type="text" id="stuAge" name="stuAge">
          </div>
          <div class="form-group">
            <label for="stuClass">报名班级</label><br>
            <input type="text" id="stuClass" name="stuClass">
          </div>
          <div class="form-group">
            <label for="stuPhone">联系方式</label><br>
            <input type="text" id="stuPhone" name="stuPhone">
          </div>
          <div class="form-group">
            <label for="stuNote">备注</label><br>
            <textarea type="text" id="stuNote" name="stuNote"></textarea>
          </div>
        </form>
        <div class="join-button">
          申请加入
        </div>
      </div>
      <div class="footer">
        <p>xiaoniaoweixiao.com</p>
        <p>小鸟微校提供技术支持</p>
      </div>
    </div>
</template>

<script>
    export default {
        name: "join",
        data: function () {
            return {}
        },
         mounted(){
       this.WXConfig.wxShowMenu(); 
   },
    }
</script>

<style scoped>
  .join{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .join > img{
    width: 100%;
    position: absolute;
  }
  .container{
    width: 80%;
    position: absolute;
    background: url(https://wxoss.xiaoniaoai.com/juxing@2x.png);
    background-size:100% 100%;
    background-position: 0 0;
    left: calc(50% - 40%);
    margin-top: 14%;
    padding: 10% 5%;
  }
  .container h3{
    font-size: .34rem;
    color: #FFC71E;
    text-align: left;
  }
  form{
    text-align: left;
    font-size: .24rem;
    color: #4E4E4E;
    margin: 13% 0;
  }
  .form-group{
    margin-bottom: 6%;
  }
  .form-group input{
    border: none;
    border-bottom: solid .02rem #FFC71E;
    width: 5rem;
    margin-top: 5%;
  }
  .form-group textarea{
    border: solid .02rem #FFECB3;
    width: 95%;
    height: 1.28rem;
    background: #FFFBEE;
    margin-top: 5%;
  }
  .join-button{
    background: url(https://wxoss.xiaoniaoai.com/join-btn.png) no-repeat;
    background-size:100%;
    background-position: center;
    width: 50%;
    margin: auto;
    font-size: .24rem;
    color: #fff;
    text-align: center;
    line-height: .84rem;
  }
  .footer{
    width: 100%;
    position: fixed;
    font-size: .13rem;
    color: #888888;
    bottom: 3%;
    text-align: center;
  }
</style>
